<template>
  <div>
    <!-- 头部区域 -->
    <div class="container heaer">
      <div class="row">
        <div class="nav-left"><span></span> 物品展示</div>
        <div class="nav-right">
          <span class="userShow">当前用户：{{ userName }}</span>
          <div class="btn-box">
            <el-input
              placeholder="请输入物品名称"
              size="small"
              class="input-with-select"
              v-model="keyWork"
              clearable
              @clear="getGoodsData"
              @change="searchBtn"
            >
              <el-button
                slot="append"
                size="small"
                icon="el-icon-search"
                @click="searchBtn"
              ></el-button>
            </el-input>
            <el-button
              v-show="isAdmin"
              type="primary"
              size="small"
              @click="houtaiBtn"
              >后台</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="container content">
      <div class="row">
        <div
          class="col-sm-6 col-md-4 col-lg-3"
          v-for="itme in goodsData"
          :key="itme.id"
        >
          <div class="thumbnail">
            <img :src="itme.Productimage" alt="..." />
            <div class="caption clearfix">
              <h6>{{ itme.Productname }}</h6>
              <p>
                <el-button @click="Describes(itme.id)">物品详细描述</el-button>
              </p>
              <p>
                <span>发布时间：{{ itme.date }}</span
                ><br />
                <span>发布人信息：{{ itme.Username }} {{ itme.Phone }}</span>
              </p>
              <a href="javascript:;" @click="lingquBtn(itme.id)">领取</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Goodsshow",
  data() {
    return {
      // 用户信息
      userInfo: JSON.parse(window.sessionStorage.getItem("token")),
      // 搜索框关键字
      keyWork: "",
      // 领取物品信息
      lingquInfo: {
        goodsId: "",
        userId: "",
      },
    };
  },
  mounted() {
    let token = window.sessionStorage.getItem("token");
    if (!token) {
      this.$router.push("/pagelogin");
    }
    this.getGoodsData();
  },
  computed: {
    // 计算该用户是否为admin
    isAdmin() {
      return this.userInfo.Type == "admin";
    },
    // 用户名
    userName() {
      return this.userInfo.Username;
    },
    ...mapState("goodshow", ["goodsData"]),
  },
  methods: {
    ...mapActions("goodshow", ["getGoodsData"]),
    // 后台按钮事件
    houtaiBtn() {
      this.$router.push("/home");
    },
    // 搜索按钮事件
    searchBtn() {
      this.$store.dispatch("goodshow/getGoodsData", this.keyWork);
    },
    // 物品描述按钮
    async Describes(id) {
      await this.$store.dispatch("goodissus/getIdGoodss", id);
      this.$alert(
        this.$store.state.goodissus.IdGoods[0].Describes,
        "物品描述",
        {
          confirmButtonText: "确定",
        }
      );
    },
    // 领取物品按钮
    lingquBtn(goodsId) {
      this.lingquInfo.goodsId = goodsId;
      this.lingquInfo.userId = this.userInfo.id;
      this.$confirm("是否领取该物品", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$store.dispatch(
            "goodshow/getLingquGoods",
            JSON.stringify(this.lingquInfo)
          );
          this.$message({
            type: "success",
            message: "领取成功!",
          });
          this.getGoodsData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作已取消！",
          });
        });
    },
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "background:#f4f4f4");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="less" scoped>
/* 头部区域 */
.heaer {
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  margin-bottom: 30px;
  position: relative;
}
.heaer > .row > div:first-child > span {
  border-left: 2px solid #2a6bed;
  border-right: 2px solid #2a6bed;
  background-color: #2a6bed;
  margin-right: 5px;
}

.heaer > .row {
  display: flex;
  justify-content: space-between;
  > .nav-right {
    display: flex;
    margin-right: 20px;
  }
  > .nav-left {
    margin-left: 20px;
  }
}
.heaer > .row > .nav-right > .btn-box {
  width: 250px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  > .el-input {
    width: 180px;
    height: 30px;
    font-size: 12px;
  }
  > .el-button {
    height: 30px;
  }
}

/* 内容区域 */
.content {
  background-color: #fff;
  padding: 20px;

  > .row > div {
    margin-bottom: 10px;
  }
}
.content .thumbnail {
  display: flex;
  flex-direction: column;
  img {
    max-height: 150px;
    max-width: 100%;
  }
  h6 {
    margin-top: 5px;
  }
  &:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 5px;
  > .caption > p {
    font-size: 14px;
    color: #a2a6a4;
  }
  > .caption > a {
    float: right;
    margin-bottom: 10px;
    margin-right: 5px;
    &:hover {
      text-decoration: none;
    }
  }
}
@media only screen and (max-width: 768px) {
  .userShow {
    display: none;
  }
}
</style>
